<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()">
            <Icon type="ios-arrow-back"/>
            返回
        </Button>
        <Form ref="formCustom" :model="formCustom"   :rules="ruleCustom" :label-width="180">
            <h3>项目基本情况</h3>
            <Card class="line-style">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="22">
                                <Form-item label="项目名称" prop="xmmc">
                                    <i-input type="text" v-model="formCustom.xmmc" placeholder="请输入项目名称"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="7">
                                <Form-item label="项目单位名称" prop="xmdwmc">
                                    <Input type="text" v-model="formCustom.xmdwmc" placeholder="请填写项目单位名称"/>
<!--                                    <Tooltip content="项目建设时的建设单位名称"  placement="top-start">-->
<!--                                        <Cascader :data="unitList" v-model="formCustom.xmdwmc" change-on-select  placeholder="请选择项目单位名称">  </Cascader>-->
<!--                                    </Tooltip>-->
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="项目单位联系人" prop="xmdwlxr">
                                    <i-input type="text" v-model="formCustom.xmdwlxr"  placeholder="请输入联系人"  @on-blur="formCustom.xmdwlxr?null:formCustom.xmdwlxr='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="项目单位手机号" prop="xmdwsjh">
                                    <i-input type="text" v-model="formCustom.xmdwsjh" placeholder="请输入手机号"  @on-blur="formCustom.xmdwsjh?null:formCustom.xmdwsjh='无'"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="7">
                                <Form-item label="市场化主体单位" prop="schztdw">
                                    <Input type="text" v-model="formCustom.schztdw" placeholder="请选择市场化主体单位"/>
<!--                                    <Cascader :data="unitList" v-model="formCustom.schztdw" change-on-select    placeholder="请选择市场化主体单位">    </Cascader>-->
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="主体单位联系人" prop="ztdwlxr">
                                    <i-input type="text" v-model="formCustom.ztdwlxr"  placeholder="请输入联系人"  @on-blur="formCustom.ztdwlxr?null:formCustom.ztdwlxr='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="主体单位手机号" prop="ztdwsjh">
                                    <i-input type="text" v-model="formCustom.ztdwsjh" placeholder="请输入手机号"  @on-blur="formCustom.ztdwsjh?null:formCustom.ztdwsjh='无'"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="22">
                                <Form-item label="市场化参与建设情况概述" prop="schjsms">
<!--                                    <Tooltip content="双方投入资源情况，背景情况"  placement="top-start">-->
                                        <i-input type="textarea" v-model="formCustom.schjsms" placeholder="请输入市场化参与建设情况概述"></i-input>
<!--                                    </Tooltip>-->
                                </Form-item>
                            </Col>
                            <Col span="22">
                                <Form-item label="项目概述" prop="xmgs">
                                    <i-input type="textarea" v-model="formCustom.xmgs"
                                             placeholder="请输入项目概述"></i-input>
                                </Form-item>
                            </Col>
<!--                            <Col span="7">-->
<!--                                <Form-item label="上报日期" prop="sbrq">-->
<!--                                    <DatePicker @on-change="dateChange" :options="options1" :value="formCustom.sbrq"    format="yyyy-MM-dd" type="date" placeholder="请选择上报日期"></DatePicker>-->
<!--                                </Form-item>-->
<!--                            </Col>-->
                        </Row>
                    </div>
                </div>
            </Card>

            <h3>招标情况</h3>
            <Card class="line-style">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="是否招标" prop="sfzb">
<!--                                    <RadioGroup v-model="formCustom.sfzb">-->
                                    <RadioGroup v-model="formCustom.sfzb" type="button">
                                        <Radio v-for="item in tender" :key="item.id" :label="item.codemc" :value="item.code"></Radio>
<!--                                        <Radio label="是">是</Radio>-->
<!--                                        <Radio label="否">否</Radio>-->
                                    </RadioGroup>
                                </Form-item>
                            </Col>
                            <Col span="7" v-if="formCustom.sfzb === '招标'" >
<!--                                <Form-item label="招标项目编号" v-if="formCustom.sfzb === '是'">-->
                                <Form-item label="招标项目编号" prop="zbxmbh">
                                    <i-input type="text" v-model="formCustom.zbxmbh" placeholder="请输入招标项目编号"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
            <h3>包组信息</h3>
            <Card class="line-style" v-for="(item,index) in formCustom.bz_info" :key="index">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="包组名称" :prop="`bz_info[${index}].bagGroupName`" :rules="[{ required: true, message: '请填写包组名称', trigger: 'blur' }]">
                                    <i-input type="text" v-model="item.bagGroupName" placeholder="请填写包组名称"></i-input>
                                </Form-item>
                            </Col>
<!--                        </Row>-->
<!--                        <Row>-->
                            <Col span="15">
                                <Form-item label="包组内容" :prop="`bz_info[${index}].bagGroupContent`" :rules="[{ required: true, message: '请填写包组内容', trigger: 'blur' }]">
                                    <Input v-model="item.bagGroupContent" maxlength="100" show-word-limit type="textarea" placeholder="请填写包组内容（100字以内）" />
                                </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="7">
                                <Form-item label="招标单位/采购单位"  :prop="`bz_info[${index}].zbUnitName`"  :rules="[{ required: true, message: '请填写招标单位/采购单位', trigger: 'blur' }]">
                                    <i-input type="text" v-model="item.zbUnitName" placeholder="请填写招标单位/采购单位"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="中标单位名称"  :prop="`bz_info[${index}].bidUnitName`"  :rules="[{ required: true, message: '请填写中标单位名称', trigger: 'blur' }]" >
                                    <Input type="text"  v-model="item.bidUnitName"    placeholder="请填写中标单位名称"/>
<!--                                    <Cascader :data="unitList" v-model="item.bidUnitName" change-on-select placeholder="请填写中标单位名称"></Cascader>-->
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="中标金额" :prop="`bz_info[${index}].bidMoney`" :rules="[{ required: true, message: '请填写中标金额', trigger: 'blur' },{ validator: validateFloat, trigger: 'blur' }]" >
                                    <Input type="number" v-model="item.bidMoney" placeholder="请填写中标金额" >
                                        <span slot="append">万元</span>
                                    </Input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="7">
                                <Form-item label="甲方法人" :prop="`bz_info[${index}].A_legalPerson`">
                                    <i-input type="text" v-model="item.A_legalPerson" placeholder="请填写甲方法人"  @on-blur="item.A_legalPerson?null:item.A_legalPerson='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="甲方经办人" :prop="`bz_info[${index}].A_manager`" >
                                    <i-input type="text" v-model="item.A_manager" placeholder="请填写甲方经办人"  @on-blur="item.A_manager?null:item.A_manager='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="手机号" :prop="`bz_info[${index}].A_tel`" >
                                    <i-input type="text" v-model="item.A_tel" placeholder="请填写手机号"  @on-blur="item.A_tel?null:item.A_tel='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="乙方法人" :prop="`bz_info[${index}].B_legalPerson`" >
                                    <i-input type="text" v-model="item.B_legalPerson" placeholder="请填写乙方法人"  @on-blur="item.B_legalPerson?null:item.B_legalPerson='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="乙方经办人" :prop="`bz_info[${index}].B_manager`">
                                    <i-input type="text" v-model="item.B_manager" placeholder="请填写乙方经办人"  @on-blur="item.B_manager?null:item.B_manager='无'"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="手机号" :prop="`bz_info[${index}].B_tel`" >
                                    <i-input type="text" v-model="item.B_tel" placeholder="请填写手机号"  @on-blur="item.B_tel?null:item.B_tel='无'"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="7">
                                <Form-item label="合同签订日期" :prop="`bz_info[${index}].contract_time`" :rules="[{ required: true, message: '请填写合同签订日期', trigger: 'blur' }]">
                                    <DatePicker @on-change="contractChange($event, item)" :value="item.contract_time"  :options="options1"
                                                format="yyyy-MM"  type="month" placeholder="选择合同签订日期"></DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row justify="center" type="flex">
                            <Col v-if="!showDetail">
                                <Button type="success" @click="addLine()">添加包组</Button>&nbsp;&nbsp;
                                <Button type="error" @click="delLine(index)">删除包组</Button>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
        </Form>
        <div  v-if="!showDetail" class="save-button" >
             <Button type="primary" @click="validateForm('formCustom')">保存</Button>
        </div>
        <Modal  v-model="modal"  title="确认操作"  width="20" @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
    </div>
</template>

<script>
/*
    市场化项目管理
*/
import { insert, findList, getDictionary, jwCodeList } from '@/api/outbreak-management/government-Informationization-project/marketization-project'
import { getTender } from '@/api/outbreak-management/government-Informationization-project/weak-current-engineering-project'
export default {
  data () {
    return {
      validateFloat: (rule, value, callback) => {
        const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
        if (!reg.test(value)) {
          callback(new Error('最多只允许两位小数'))
        } else {
          callback()
        }
      },
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 弹窗控制
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      tenderingCodeStatus: false,
      formCustom: {
        xmmc: '', // 项目名称
        // xmdwmc: [], // 项目单位名称
        xmdwmc: '', // 项目单位名称
        xmdwlxr: '无', // 项目单位联系人
        xmdwsjh: '无', // 项目单位手机号
        // schztdw: [], // 主体单位
        schztdw: '', // 主体单位
        ztdwlxr: '无', // 主体单位联系人
        ztdwsjh: '无', // 主体单位手机号
        schjsms: '', // 市场化参与建设情况概述
        xmgs: '', // 项目概述
        sbrq: '', // 上报日期
        // sfzb: '是', // 是否招标
        sfzb: '', // 是否招标
        zbxmbh: '', // 是否招标编号
        bz_info: [{
          bagGroupName: '', // 包组名称
          bagGroupContent: '', // 包组内容
          zbUnitName: '', // 中标单位名称
          bidUnitName: '', // 中标单位名称
          bidMoney: '', // 中标金额
          A_legalPerson: '无', // 甲方法人
          A_manager: '无', // 甲方经办人
          A_tel: '无', // 手机号
          B_legalPerson: '无', // 乙方法人
          B_manager: '无', // 乙方经办人
          B_tel: '无', // 乙方电话
          contract_time: ''// 合同签订日期
        }] // 包组信息
      },
      ruleCustom: {
        xmmc: [
          { required: true, message: '项目名称必填', trigger: 'blur' },
          { min: 0, max: 30, message: '项目名称长度不能超过30', trigger: 'blur' }
        ],
        // xmdwmc: { required: true, type: 'array', message: '项目单位名称必选', trigger: 'change' },
        // schztdw: { required: true, type: 'array', message: '市场化主体单位名称必选', trigger: 'change' },
        xmdwmc: { required: true, message: '项目单位名称必填', trigger: 'blur' },
        schztdw: { required: true, message: '市场化主体单位名称必填', trigger: 'blur' },
        schjsms: { required: true, message: '市场化参与建设情况概述必填', trigger: 'blur' },
        xmgs: { required: true, message: '项目概述必填', trigger: 'blur' },
        sbrq: { required: true, message: '上报日期必选', trigger: 'blur' },
        zb_type: { required: true, message: '是否招标必选', trigger: 'change' },
        zbxmbh: { min: 0, max: 30, message: '编号长度不能超过30', trigger: 'blur' },
        sfzb: [
          { required: true, message: '是否招标必填', trigger: 'blur' }
        ],
        zbxmbh: [
          { required: true, message: '招标项目编号必填', trigger: 'blur' }
        ]
      },
      // 是否招标接口数据
      tender: [],
      // 单位
      unitList: []
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    /**
        * 日期格式化
    **/
    dateChange (date) {
      this.formCustom.sbrq = date
    },
    contractChange (date, item) {
      item.contract_time = date
    },
    // 获取是否招标
    getTender () {
      getTender().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.tender = res
        }
      })
    },
    handleSubmit (name) {
      let formCustom = { ...this.formCustom }
      if (this.showBackBtn) {
        this.handleEdit(formCustom)
      } else {
        this.handleAdd(formCustom)
      }
    },
    // 新增
    handleAdd (formCustom) {
      formCustom.bz_info = JSON.stringify(formCustom.bz_info)
      // formCustom.xmdwmc = JSON.stringify(formCustom.xmdwmc)
      // formCustom.schztdw = JSON.stringify(formCustom.schztdw)
      insert(formCustom).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('保存成功!')
          this.currentIndex = ''
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 修改
    handleEdit (formCustom) {
      formCustom.bz_info = JSON.stringify(formCustom.bz_info)
      // formCustom.xmdwmc = JSON.stringify(formCustom.xmdwmc)
      // formCustom.schztdw = JSON.stringify(formCustom.schztdw)
      insert(formCustom).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('更新成功!')
          this.currentIndex = ''
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 编辑状态
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.id)
      }
    },
    // 获取详情
    getEditData (id) {
      findList({ id: id }).then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          let formCustom = data
          // formCustom.xmdwmc = JSON.parse(formCustom.xmdwmc)
          // formCustom.schztdw = JSON.parse(formCustom.schztdw)
          if (formCustom.bz_info) {
            formCustom.bz_info = JSON.parse(formCustom.bz_info)
          }
          console.log(formCustom)
          this.formCustom = formCustom
        } else {
          this.$Message.success('获取信息失败!')
        }
      })
    },
    addLine () {
      this.formCustom.bz_info.push(
        {
          bagGroupName: '',
          bagGroupContent: '',
          zbUnitName: '',
          bidUnitName: '',
          bidMoney: '',
          A_legalPerson: '无',
          A_manager: '无',
          A_tel: '无',
          B_legalPerson: '无',
          B_manager: '无',
          B_tel: '无',
          contract_time: ''
        })
    },
    delLine (index) {
      let len = this.formCustom.bz_info.length
      if (len === 1) {
        this.$Message.warning('只有一条数据不允许删除!')
        return
      }
      this.formCustom.bz_info.splice(index, 1)
      this.clearValidate()
    },
    clearValidate () {
      this.$nextTick(() => {
        let formData = JSON.stringify(this.formCustom)
        this.$refs.formCustom.resetFields()
        this.formCustom = JSON.parse(formData)
      })
    },
    // 获取单位
    initData () {
      Promise.all([getDictionary('xm_type'), jwCodeList()]).then(res => {
        this.xm_type_list = res[0].data.data
        let unitList = res[1].data.data
        let array = []
        unitList.forEach((item) => {
          if (item.yjpid === '0') {
            array.push({ value: item.yidw, label: item.yidw, id: item.yjpid })
          } else {
            jwCodeList({ yjpid: item.yjpid }).then(({ data }) => {
              array.push({ value: item.yidw, label: item.yidw, id: item.yjpid, children: data.data, loading: false })
            })
          }
        })
        this.unitList = array
      })
    }

  },
  created () {
    // this.initData()
    this.isEditStatus()
    this.getTender()
  }
}
</script>

<style scoped>
    h3{
        margin: 10px auto;
    }
    .save-button{
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
</style>
